<template>
  <div class="app">
    <Tab v-if="tabFlag" />
    <!-- 中间内容区域  由vue-router提供  router-view  -->
    <div class="container">
      <van-overlay :show="loading">
        <div class="wrapper">
          <van-loading vertical text-color="#0094ff"> 加载中... </van-loading>
        </div>
      </van-overlay>
      <router-view></router-view>
    </div>
    <TabBar v-if="tabBarFlag" />
  </div>
</template>
<script lang="ts">
import { computed, defineComponent, reactive, toRefs, watch } from "vue";
import { useRoute } from "vue-router";
import Tab from "./components/Tab/index.vue";
import TabBar from "./components/TabBar/index.vue";
import { loadingStore } from "./utils/request";
export default defineComponent({
  components: { Tab, TabBar },
  setup() {
    const route = useRoute();
    const loadingState: any = loadingStore.state;
    const loading = computed(() => loadingState.loading?.loading);
    //todo tabArr是没有头部的路由路径的一个数组
    const tabArr = [
      "/video",
      "/mine",
      "/home",
      "/nines",
      "fqph",
      "/firstbrand",
      "/star",
      "/discount",
      "/reel",
      "/cat",
      "cat/list",
      "/monther",
      "/search",
    ];
    const tabBarArr = [
      "/login",
      "/register",
      "/setuser",
      "/footprint",
      "/nineMail",
      "/fqph",
      "/firstbrand",
      "/star",
      "/discount",
      "/reel",
      "/monther",
      "/search",
      "/cat",
      "cat/list",
    ];
    const state = reactive({
      tabFlag: false,
      tabBarFlag: false,
    });
    const checkTab = () => {
      // console.log('route', route)
      const currentPath = route.path;
      const f = tabArr.some((item) => currentPath.indexOf(item) !== -1);
      if (f) {
        state.tabFlag = false;
      } else {
        state.tabFlag = true;
      }
    };
    const checkTabBar = () => {
      const currentPath = route.path;
      const f = tabBarArr.some((item) => currentPath.indexOf(item) !== -1);
      if (f) {
        state.tabBarFlag = false;
      } else {
        state.tabBarFlag = true;
      }
    };
    watch(route, () => {
      // console.log('路由改变了')
      checkTab();
      checkTabBar();
    });
    return {
      ...toRefs(state),
      loading,
    };
  },
});
</script>

<style lang="stylus">
.van-dialog__message
  color red
.van-popover__action
  width .9rem
.van-popover[data-popper-placement=bottom] .van-popover__arrow
  left 71%
html,body,#app
  height 100%
.app
  width 100%
  height 100%
  display flex
  flex-direction column
  .container
    width 100%
    height 100%
    flex 1
    overflow auto
    .wrapper
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      top: 0;
      margin: auto;
      width: 100px;
      height: 100px;
      background: white;
      display: flex;
      justify-content: center;
      align-items: center;
</style>
